<template>
  <div class="table">
    <table>
      <thead>
        <tr>
          <th><div class="table_item_content">月份</div></th>
          <th><div class="table_item_content">日</div></th>
          <th><div class="table_item_content">一</div></th>
          <th><div class="table_item_content">二</div></th>
          <th><div class="table_item_content">三</div></th>
          <th><div class="table_item_content">四</div></th>
          <th><div class="table_item_content">五</div></th>
          <th><div class="table_item_content">六</div></th>
          <th><div class="table_item_content">月累计（kW·h）</div></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="i in pageData" :key="i.month">
        <td>{{i.month}}</td>
        <td>
          <div class="table_item" v-for="(d, index) in i.column0" :key="index">
            <div class="table_item_content" v-if="d.date === ''"></div>
            <div class="table_item_content" v-else>
              <div class="table_item_content_date">{{d.date}}</div>
              <div class="table_item_content_usage">{{d.usage}}</div>
            </div>
          </div>
        </td>
        <td>
          <div class="table_item" v-for="(d, index) in i.column1" :key="index">
            <div class="table_item_content" v-if="d.date === ''"></div>
            <div class="table_item_content" v-else>
              <div class="table_item_content_date">{{d.date}}</div>
              <div class="table_item_content_usage">{{d.usage}}</div>
            </div>
          </div>
        </td>

        <td>
          <div class="table_item" v-for="(d, index) in i.column2" :key="index">
            <div class="table_item_content" v-if="d.date === ''"></div>
            <div class="table_item_content" v-else>
              <div class="table_item_content_date">{{d.date}}</div>
              <div class="table_item_content_usage">{{d.usage}}</div>
            </div>
          </div>
        </td>

        <td>
          <div class="table_item" v-for="(d, index) in i.column3" :key="index">
            <div class="table_item_content" v-if="d.date === ''"></div>
            <div class="table_item_content" v-else>
              <div class="table_item_content_date">{{d.date}}</div>
              <div class="table_item_content_usage">{{d.usage}}</div>
            </div>
          </div>
        </td>

        <td>
          <div class="table_item" v-for="(d, index) in i.column4" :key="index">
            <div class="table_item_content" v-if="d.date === ''"></div>
            <div class="table_item_content" v-else>
              <div class="table_item_content_date">{{d.date}}</div>
              <div class="table_item_content_usage">{{d.usage}}</div>
            </div>
          </div>
        </td>

        <td>
          <div class="table_item" v-for="(d, index) in i.column5" :key="index">
            <div class="table_item_content" v-if="d.date === ''"></div>
            <div class="table_item_content" v-else>
              <div class="table_item_content_date">{{d.date}}</div>
              <div class="table_item_content_usage">{{d.usage}}</div>
            </div>
          </div>
        </td>

        <td>
          <div class="table_item" v-for="(d, index) in i.column6" :key="index">
            <div class="table_item_content" v-if="d.date === ''"></div>
            <div class="table_item_content" v-else>
              <div class="table_item_content_date">{{d.date}}</div>
              <div class="table_item_content_usage">{{d.usage}}</div>
            </div>
          </div>
        </td>
        <td>{{i.allUsage}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
  import dayjs from 'dayjs'
  import { onMounted, ref } from "vue";

  const pageData = ref(
[
        {
          month:'2023-12',
          allUsage:'100',
          column0:[],
          column1:[],
          column2:[],
          column3:[],
          column4:[],
          column5:[],
          column6:[],
        },
        {
          month:'2024-01',
          allUsage:'100',
          column0:[],
          column1:[],
          column2:[],
          column3:[],
          column4:[],
          column5:[],
          column6:[],
        },
        {
          month:'2024-02',
          allUsage:'100',
          column0:[],
          column1:[],
          column2:[],
          column3:[],
          column4:[],
          column5:[],
          column6:[],
        },
      ]
  )
  const dealData = () => {
  pageData.value.forEach(d => {
    const monthStartDay = d.month + '-1'
    const monthEndDay = dayjs(monthStartDay).endOf('month').format('YYYY-MM-DD')
    const monthDuration = dayjs(monthEndDay).diff(monthStartDay, 'day')
    for(let i = 0; i < monthDuration + 1; i++){
      const day = dayjs(monthStartDay).add(i, 'day').format('YYYY-MM-DD')
      //todo 根据后台真实值替换每日用量
      const dayUSage = Math.floor(Math.random() * 10000)
      const week = dayjs(day).day()
      const obj = {
        date:dayjs(day).format('DD日'),
        usage:dayUSage + 'kW·h'
      }
      d[`column${week}`].push(obj)
    }
    const firstDayWeekIndex = dayjs(monthStartDay).day()
    for(let i = 0; i < firstDayWeekIndex; i++){
      d[`column${i}`].unshift(
        {
          date:'',
          usage:0
        }
      )
    }
  })
}
onMounted(() => {
  dealData()
})
</script>

<style scoped lang="scss">
.table_item_content{
  height:40px;
  text-align: center;
  padding-top:3px;
  &_date{
    font-size: 11px;
    font-weight: bold;
  }
  &_usage{
    font-size: 11px;
    color:#4AA5A6;
  }
}
table{
  width: 100%;
  border:none;
  position: relative;
  border-collapse: collapse;
}
thead{
  position: sticky;
  z-index: 100;
  top:0;
}
th{
  padding:0;
  .table_item_content{
    margin:auto;
    height:35px;
    padding-top:0;
    line-height: 35px;
    background: #F2F2F2;
    border-right:1px solid #797979;
    border-top:1px solid #797979;
  }
  &:nth-child(1){
    .table_item_content{
      border-left:1px solid #797979;
    }
  }
}
tr{
  position: relative;
  &:after{
    display: block;
    content:'';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #797979;
    bottom: 0;
    left: 0;
  }
}
td{
  vertical-align: top;
  width: calc(100% / 9);
  padding:0;
}
</style>